<script setup lang="ts">
import {useRouter} from "vue-router";

const router = useRouter()
</script>

<template>
<div>
  <n-grid :x-gap="15" cols="24">
    <n-gi :span="8">
      <div class="consume-card" @click="router.replace({path: '/consume/normal', query: {memberid: '123'}})">
        <div class="consume-card-bg consume-card-bg1"></div>
        <div class="consume-card-content">
          <h1>普通消费</h1>
        </div>
      </div>
    </n-gi>
    <n-gi :span="8">
      <div class="consume-card">
        <div class="consume-card-bg consume-card-bg2"></div>
        <div class="consume-card-content">
          <h1>记次消费</h1>
        </div>
      </div>
    </n-gi>
    <n-gi :span="8">
      <div class="consume-card">
        <div class="consume-card-bg consume-card-bg3"></div>
        <div class="consume-card-content">
          <h1>开台消费</h1>
        </div>
      </div>
    </n-gi>
    <n-gi :span="8">
      <div class="consume-card">
        <div class="consume-card-bg consume-card-bg4"></div>
        <div class="consume-card-content">
          <h1>计时消费</h1>
        </div>
      </div>
    </n-gi>
    <n-gi :span="8">
      <div class="consume-card">
        <div class="consume-card-bg consume-card-bg5"></div>
        <div class="consume-card-content">
          <h1>历史记录</h1>
        </div>
      </div>
    </n-gi>
    <n-gi :span="8">
      <div class="consume-card">
        <div class="consume-card-bg consume-card-bg6"></div>
        <div class="consume-card-content">
          <h1>消费退货</h1>
        </div>
      </div>
    </n-gi>
  </n-grid>
</div>
</template>

<style scoped lang="less">
.consume-card{
  width: 224px;
  height: 214px;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  background: #e2e2e2;
  border: transparent solid 3px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  .consume-card-bg{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: .3;
  }
  .consume-card-bg1{
    background-color: #c069db;
    background-image: url("@renderer/assets/images/main/consume_01.png");
    background-repeat: no-repeat;
    background-position: center center;
  }
  .consume-card-bg2{
    background-color: #5480ea;
    background-image: url("@renderer/assets/images/main/consume_02.png");
    background-repeat: no-repeat;
    background-position: center center;
  }
  .consume-card-bg3{
    background-color: #d7de00;
    background-image: url("@renderer/assets/images/main/consume_03.png");
    background-repeat: no-repeat;
    background-position: center center;
  }
  .consume-card-bg4{
    background-color: #f0be4c;
    background-image: url("@renderer/assets/images/main/consume_04.png");
    background-repeat: no-repeat;
    background-position: center center;
  }
  .consume-card-bg5{
    background-color: #f3525e;
    background-image: url("@renderer/assets/images/main/consume_05.png");
    background-repeat: no-repeat;
    background-position: center center;
  }
  .consume-card-bg6{
    background-color: #b6e8f7;
    background-image: url("@renderer/assets/images/main/consume_06.png");
    background-repeat: no-repeat;
    background-position: center center;
  }
  .consume-card-content{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    h1{
      font-size: 18px;
    }
  }
}
.consume-card:hover{
  border: #18a058 solid 3px;
}
</style>
